<template>
  <div class="list-wrapper">
    <!-- <filtrateMonth :fetchData="fetchData" ></filtrateMonth> -->
    <h4>培训师空置成本数据统计</h4>
    <div class="return">
      <span class="el-icon-d-arrow-left"></span>
      <router-link to="/dashboard/trainerVacancy">
        <span>返回图表</span>
      </router-link>
    </div>
    <div class="list-top">
      <div>
        <span style="margin-right:60px">培训师编号：{{info.number}}</span>
        <span >培训师姓名：</span>
        <span @click="goClassRoomDetail" style="margin-right:60px;cursor:pointer">{{info.name}}</span>
        <span style="margin-right:60px">累积空置课时：{{info.total_vacancy}}</span>
        <span style="margin-right:60px">累积空置率：{{info.total_vacancy_rate}}%</span>
        <span style="margin-right:60px">累积空置成本：{{info.total_money}}</span>
      </div>
      <!-- <el-button type="primary">下载</el-button> -->
    </div>
    <table class="list-table" border="0" cellspacing="0" cellpadding="0">
      <thead>
      <tr>
        <th>序号</th>
        <th>月份</th>
        <th>空置单价</th>
        <th>当月课时</th>
        <th>空置课时</th>
        <th>空置率</th>
        <th>空置成本</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item,index) in list">
        <td>{{index+1}}</td>
        <td>{{item.month}}</td>
        <td>{{item.price}}</td>
        <td>80</td>
        <td>{{item.vacancy}}</td>
        <td>{{item.vacancy_rate}}%</td>
        <td>{{item.money}}</td>
      </tr>
      </tbody>
    </table>
    <div class="pagination">
      <el-pagination v-if="list.length" @current-change="handleCurrentChange" :current-page="page" :page-size="10" layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
      <div class="mess" v-if="!list.length">暂无数据</div>
    </div>
  </div>
</template>
<script>
  import filtrateMonth from "../filtrateMonth";

  export default {
    data() {
      return {
        page: 1,
        total: 0,
        id: "",
        filData: {},
        info: {},
        list: [],
        classRoomId: ""
      };
    },
    components: {
      filtrateMonth
    },
    methods: {
      fetchData(start, end) {
        let data = {
          start: start ? start : "",
          end: end ? end : "",
          classroom: this.id,
          page: this.page
        };
        this.apiPost("Dashboard/trainerVacancyDetail", data).then(res => {
          this.info = res.info;
          this.list = res.list;
          this.classRoomId = res.info.id;
          this.total = res.total;
        });
      },
      handleCurrentChange(val) {
        this.page = val;
        if (this.filData) {
          this.fetchData(this.filData.start, this.filData.end);
        } else {
          this.fetchData();
        }
      },
      goClassRoomDetail() {
        window.open(SITE+"operate/manpower/listDetail/"+this.classRoomId);
      },
    },
    created() {
      this.id = this.$route.params.id;
      this.filData = Lockr.get("filData");
      if (this.filData) {
        this.fetchData(this.filData.start, this.filData.end);
      } else {
        this.fetchData();
      }
    }
  };
</script>
<style lang="css" scoped>
  .container {
    box-sizing: border-box;
    width: 100%;
    background: #ffffff;
    min-height: 100%;
    font-size: 14px;
    overflow: hidden;
  }
  .list-wrapper > h4 {
    text-align: center;
    padding-top: 20px;
  }
  .el-icon-d-arrow-left {
    margin: 0 5px 10px 0;
    font-size: 14px;
  }
  .return{
    padding-left: 20px;
  }
  .return a{
    color: #333;
  }
  .list-top{
    padding: 0 20px 10px;
  }
  .pagination {
    text-align: center;
    margin-top: 30px;
  }
  .mess {
    color: #666;
  }
</style>
